<template>
  <div class="trend" id="trend"></div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const trend = this.$echarts.init(document.getElementById('trend'));
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019-08-27', '2019-08-29', '2019-08-31', '2019-09-02', '2019-09-04', '2019-09-06', '2019-09-08', '2019-09-10']
        },
        yAxis: {
          type: 'value'
        },
        title: {
          text: '市场交易量波动趋势',
          textStyle: {
            color: 'rgb(148, 191, 241)',
            fontSize: 24
          }
        },
        series: [
          {
            data: [3663, 1945, 3764, 3943, 2142, 3599, 3679, 1550, 4172, 1489],
            type: 'line',
            areaStyle: {}
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        }
      };
      trend.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>
.trend {
    width: 1000px;
    height: 500px;
    margin: auto;
    border-image-source: url(../../../assets/img/border-121-0f05f2ce15011b2a.png);
    border-width: 14px;
    border-image-slice: 14 fill;
    border-style: solid;
    background-clip: padding-box;
    filter: blur(0px);
    box-sizing: border-box;
    margin-bottom: 40px;
}
</style>